<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p3_CSS常用值</title>
    <style>
        h1{
            color: red;
        /*    rgb表示法(red,green,blue),每个位置的取值范围是[0,255]*/
            color: rgb(255,0,0);
            color: rgb(0,255,255);
            color: rgb(0,255,0);
            color: rgb(255,0,255);
            color: rgb(0,0,255);
            color: rgb(255,255,0);
            color: rgb(128,128,128);
            color: rgb(255,255,255);
            color: rgb(0,0,0);

        /*    十六进制表示法 #rrggbb,每个位置的取值范围[00,ff]*/
            color: #ff0000;
            color: #00ff00;
            color: #0000ff;
            color: #000000;
            color: #ffffff;
            color: 808080;
        /*    十六进制简写方式#rgb    [0,f]*/
            color: #f00;
            color: #0f0;
            color: #00f;
            color: #808080;

        /*    rgba 表示法 (red, green,blue,alpha),alpha不透明度。取值范围[0,1]*/
            color: rgba(255,0,0,1);
            color: rgba(255,0,0,0.8);
            color: rgba(255,0,0,0.6);
            color: rgba(255,0,0,0.3);
            color: rgba(255,0,0,1);

        }
        .d1 {
            /*注意：插入背景图必须所在区域的大小*/
            width: 50px;
            height: 100px;
            /*插入背景图*/
            background-image: url("img/mr.png");
            /*调整背景图的尺寸 宽 高*/
            background-size: 50px 100px;
            /*设置背景颜色，没有图片的地方显示背景色*/
            background-color: black;
        }
        .d2{

            width: 500px;
            height: 300px;
            border:5px solid red;
            background-image: url("img/mr.png");
            /*设置背景图不重复*/
            background-repeat: no-repeat;
            /*s水平方向的正方向是右 垂直方向的正方向是下*/
            background-position: 0 0;  /*默认位置在左上角 原点*/
            background-position: 50px 0;
            background-position: 50px 50px;
            background-position: -50px 0;  /*向左*/
            background-position: -50px -50px; /*向左上*/

            /* x长度减去图片x值，剩余的50%*/
            background-position: 50% 50%;
            background-position: 100% 100%;  /*右下角*/

            background-position:  left top;  /*左上角*/
            background-position:  right bottom;  /*右下角*/
            background-position:  center center;  /*居中*/
            background-position:  center;  /*两个center可以合并为一个*/
        }

        .d3{
            width: 500px;
            height: 300px;
            background-image: linear-gradient(30deg,red,orange,yellow);
        }


    </style>
</head>
<body>
        <!--  .d*3 tab补全 -->
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>

</body>
</html>